<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪类选择器</title>
  <style>
    /* 伪类选择器
      动态伪类选择器
      E:link     链接伪类选择器
      E:visited  元素被访问过
      E:hover    鼠标停留在元素上
      E:active   元素被激活
      E:focus    元素获取焦点
     */


    .downloadInfo {
      text-align: center;
    }

    .btn {
      background-color: #0074cc;
      background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
      background-repeat: repeat-x;
      display: inline-block;
      border: 1px solid #cccccc;
      border-radius: 6px;
      cursor: pointer;
      color: #ffffff;
      font-size:20px;
      font-weight:normal;
      line-height:normal;
      padding: 14px 24px;
      text-align: center;
      text-shadow: 0 -2px 0 rgb(0, 0, 0, 0.25);
      text-decoration: none;
      vertical-align: middle;
    }

    .btn:hover {
      background-position:0 -15px;
      background-color: #0055cc;
      transition:background-position 0.3s linear;
    }
    .btn:active {
      background-color: #004ab3;
      background-image: none;
      box-shadow: inset 0px 2px 4px red, 0px 1px 2px green;
    }
    .btn:focus {
      outline: thin dotted #333333;
      outline: 5px auto blueviolet;
      outline-offset: -2px;
    }
  </style>
</head>
<body>
  <div class="downloadInfo">
    <a href="#" class="btn">View Project on GitHub
    </a>
  </div>

</body>
</html>